<template>

  <div class="filter-container">

    <el-row>

      <el-col span="3">
        <el-form-item label="职称">
          <el-input  placeholder="请输入职称" v-model="state.pagination.roleName" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="所属部门">
          <el-input  placeholder="请输入所属部门" v-model="state.pagination.department" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-button @click="load" >查询</el-button>
        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
      </el-col>
    </el-row>


  </div>

  <el-table :data="state.dataList"  style="width: 100%" >

    <el-table-column label="ID" align="center" prop="id"></el-table-column>
    <el-table-column label="职称" align="center" prop="roleName"></el-table-column>
    <el-table-column label="所属部门" align="center" prop="department"></el-table-column>
    <el-table-column label="所拥有权限" align="center" prop="authorities" >
      <template v-slot="row">
        <li v-for="item in row.row.authorities" :key="item">{{ item.authorityName }}</li>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" width="170"></el-table-column>
    <el-table-column label="最后修改时间" align="center" prop="lastTime" width="170"></el-table-column>

    <el-table-column label="操作" align="center" fixed="right" width="180" >
      <template v-slot="{row}">
        <el-button link type="primary" size="small" @click="handleCreateAuthority(row)">添加权限</el-button>
        <el-button link type="primary" size="small" @click="handleOmitAuthority(row)">删除权限</el-button>
        <el-button link type="primary" size="small" @click="handleEidt(row)">修改</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="state.pagination.currentPage"
        :page-size="state.pagination.pageSize"
        :page-sizes="[1, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total">
    </el-pagination>
  </div>

  <!-- 新增权限弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible1"
      title="添加权限"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
    <el-row>

             <el-form-item label="所有权限">
          <el-select
              v-model="state.formData.aid"
              placeholder="请选择权限"
              multiple
              collapse-tags
              collapse-tags-tooltip
              style="width: 240px"
              clearable
          >
            <el-option
                v-for="item in state.options"
                :key="item.id"
                :label="item.authorityName"
                :value="item.id"
            />
          </el-select>
           </el-form-item>

    </el-row>
  </div>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAddAuthority">确定</el-button>
        </span>
    </template>
  </el-dialog>



  <!-- 删除权限弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible2"
      title="删除权限"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
    <el-row>

             <el-form-item label="所有权限">
          <el-select
              v-model="state.formData.aid"
              placeholder="请选择权限"
              multiple
              collapse-tags
              collapse-tags-tooltip
              style="width: 240px"
              clearable
          >
            <el-option
                v-for="item in state.options"
                :key="item.id"
                :label="item.authorityName"
                :value="item.id"
            />
          </el-select>
           </el-form-item>

    </el-row>
  </div>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleDeleteAuthority">确定</el-button>
        </span>
    </template>
  </el-dialog>




  <!-- 新增角色弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible"
      title="新增角色"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form :model="state.formData" label-position="top" :rules="rules" ref="ruleFormRef">
    <el-row>
        <el-col span="3">
        <el-form-item label="职称" prop="roleName">
          <el-input  placeholder="请输入职称" v-model="state.formData.roleName"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="所属部门" prop="department">
          <el-input  placeholder="请输入所属部门" v-model="state.formData.department"  clearable />
        </el-form-item>
      </el-col>


    </el-row>
    </el-form>
  </div>

          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAdd">确定</el-button>
        </span>
    </template>
  </el-dialog>

  <!--修改角色弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible4Edit"
      title="修改角色"
      width="30%"
  >
    <!--    <span>新增账单</span>-->
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form :model="state.formData" label-position="top" :rules="rules" ref="ruleFormRef">
    <el-row>
        <el-col span="3">
        <el-form-item  label="职称" prop="roleName">
          <el-input  placeholder="请输入职称" v-model="state.formData.roleName"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item  label="所属部门" prop="department">
          <el-input  placeholder="请输入所属部门" v-model="state.formData.department" clearable />
        </el-form-item>
      </el-col>


    </el-row>
    </el-form>
  </div>

          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleUpdate">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>

</template>


<script setup>
  import {reactive,ref} from "vue";
  import { ElMessage, ElMessageBox } from 'element-plus';
  import instance from "../../../request";
  const state=reactive({
  dataList: [],//表格数据
  options:[],
  selectedOptions: [],
  formData: {
    roleName:"",
    department:""
  },
  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible1: false,
    dialogFormVisible2: false,
    /*dialogFormVisible3: false,*/
  dialogFormVisible4Edit:false,//编辑表单是否可见

    pagination: {//分页相关模型数据
      currentPage: 1,//当前页码
      pageSize:5,//每页显示的记录数
      total:0,//总记录数
      roleName: "",
      department: ""
    },
})

  const rules = reactive({
    roleName: [
      {required: true,message:"请输入职称",trigger: "blur"},
    ],
    department: [
      {required: true,message:"请输入所属部门",trigger: "blur"},
    ]
  })

  //多选选择器
  const getAuthorities=()=>{
  instance.get('/authority').then(res=>{
    state.options=res.data
  })
}

  //角色数据加载
  const load=()=>{
    let param ="?roleName="+state.pagination.roleName;
    param +="&department="+state.pagination.department;
  instance.get('/role/'+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then(res=>{
    state.pagination.total = res.data.total;
    state.dataList = res.data.list;
  })
}

  //切换页码
  const handleCurrentChange=(currentPage)=> {
    //修改页码值为当前选中的页码值
    state.pagination.currentPage = currentPage;
    //执行查询
    load();
  }

  const handleSizeChange=(pageSize)=>{
    state.pagination.pageSize = pageSize;
    load();
  }

//添加窗口弹出
  const   handleCreate=()=> {
  state.dialogFormVisible = true;
  resetForm();
}



//数据清空
  const resetForm=()=> {
  state.formData={};
}

//
  const cancel=()=>{
  state.dialogFormVisible = false;
  state.dialogFormVisible4Edit = false;
    state.dialogFormVisible1 = false;
    state.dialogFormVisible2 = false;
  ElMessage({type: 'info', message: '操作取消',})
}


  //添加角色
  const handleAdd=()=> {
  instance.post("/role/insert",state.formData).then((res)=>{
    if (state.formData.roleName==null || state.formData.roleName==""){
      ElMessage({type: 'error', message: '职称不能为空',})
    }else if (state.formData.department==null || state.formData.department==""){
      ElMessage({type: 'error', message: '所属部门不能为空',})
    }
//如果操作成功，关闭弹层，显示数据
    if(res.flag){
      state.dialogFormVisible = false;
      ElMessage({type: 'success', message: '添加成功',})
    }else {
      ElMessage({type: 'error', message: '添加失败',})
    }
  }).finally(()=>{
    load()
  });
}

  //给角色添加权限
  const handleAddAuthority=()=> {
    instance.post("/role",state.formData).then((res)=>{
      if (state.formData.aid==null || state.formData.aid==""){
        ElMessage({type: 'error', message: '权限不能为空',})
      }
      if (res.msg=="添加权限不能重复"){
        ElMessage({type: 'error', message: '添加权限不能重复',})
      }
//如果操作成功，关闭弹层，显示数据
      if(res.flag){
        state.dialogFormVisible1 = false;
        ElMessage({type: 'success', message: '添加成功',})
      }else {
        ElMessage({type: 'error', message: '添加失败',})
      }
    }).finally(()=>{
      load()
    });
  }

  //添加权限窗口弹出
  const   handleCreateAuthority=(row)=> {
    getAuthorities()
    instance.get("/role/" + row.id).then(res => {
      if (res.flag){
        state.formData=res.data
        state.dialogFormVisible1 = true;
      }
    })
  }

  //给角色删除权限
  const handleDeleteAuthority=()=> {
    instance.post("/role/delete",state.formData).then((res)=>{
      if (state.formData.aid==null || state.formData.aid==""){
        ElMessage({type: 'error', message: '权限不能为空',})
      }
      if (res.msg=="删除权限不存在"){
        ElMessage({type: 'error', message: '删除权限不存在',})
      }
//如果操作成功，关闭弹层，显示数据
      if(res.flag){
        state.dialogFormVisible2 = false;
        ElMessage({type: 'success', message: '删除成功',})
      }else {
        ElMessage({type: 'error', message: '删除失败',})
      }
    }).finally(()=>{
      load()
    });
  }

  //删除权限窗口弹出
  const   handleOmitAuthority=(row)=> {
    getAuthorities()
    instance.get("/role/" + row.id).then(res => {
      if (res.flag){
        state.formData=res.data
        state.dialogFormVisible2 = true;
      }
    })
  }

//修改页面弹出
  const  handleEidt=(row)=> {
  instance.get("/role/"+row.id).then(res=>{
  if(res.flag){
//展示弹层，加载数据
  state.formData=res.data
  state.dialogFormVisible4Edit = true;
}else{
    ElMessage({type: 'error', message: '修改页面弹出失败',})
  }
})
}

//修改
  const handleUpdate=()=>{
    instance.put("/role",state.formData).then((res)=>{
      if (state.formData.roleName==null || state.formData.roleName==""){
        ElMessage({type: 'error', message: '职称不能为空',})
      }else if (state.formData.department==null || state.formData.department==""){
        ElMessage({type: 'error', message: '所属部门不能为空',})
      }
//如果操作成功，关闭弹层，显示数据
      if(res.flag){
        state.dialogFormVisible4Edit = false;
        ElMessage({type: 'success', message: '修改成功',})
      }else {
        ElMessage({type: 'error', message: '修改失败',})
      }
    }).finally(()=>{
      load();
    });

}



  //删除角色
  const handleDelete=(row)=> {
    if (row.authorities == null || row.authorities == "") {
      ElMessageBox.confirm('是否删除改角色?', '提示', {
            confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',
          }
      ).then(() => {
        instance.delete("/role/" + row.id).then((res) => {
          if (res.flag) {
            ElMessage({type: 'success', message: '删除成功',})
          } else {
            ElMessage({type: 'error', message: '删除失败',})
          }
        }).finally(() => {
          load()
        });
      }).catch(()=>{
        ElMessage({type: 'info', message: '已取消删除',})
      });
    }else {
      ElMessage({type: 'error', message: '请先删除所拥有权限',})
    }
  }

  load()
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-form-item {
  margin-right: 10px;
}

.filter-container .butT {
  margin-left: 10px;
}
</style>